<template>
  <div class="">
    <PageTitle :select="3"></PageTitle>
    <div class="cont" :style="{ height: `${clientHeight / scaleX - 40}px` }">
      <el-scrollbar style="height: 100%">
        <div class="bg">
          <div class="top">
            <el-form :inline="true">
              <el-form-item label="设备分类：">
                <el-select v-model="state.typeTel" placeholder="请选择" size="large" style="width: 120px"
                  @change="selectChange">
                  <el-option v-for="item in state.options" :key="item.id" :label="item.name" :value="item.id" />
                </el-select>
              </el-form-item>
              <!-- <el-form-item label="设备：">
                <el-select
                  v-model="state.typeDetal"
                  placeholder="请选择"
                  size="large"
                  style="width: 120px"
                  @change="handlerSelectExs"
                >
                  <el-option
                    v-for="item in state.EXSoptions"
                    :key="item.jitai_uid"
                    :label="item.jitai_name"
                    :value="item.jitai_uid"
                  />
                </el-select>
              </el-form-item> -->
              <!-- <el-form-item label="订单号：">
                <el-input style="width: 209px" v-model="state.orderNo" placeholder="请输入" />
              </el-form-item> -->

              <el-form-item label="时间：">
                <el-date-picker v-model="state.checkTime" type="date" placeholder="请选择" format="YYYY-MM-DD"
                  value-format="YYYY-MM-DD" :clearable="false" @change="state.seachMenu = state.seachMenu + 1" />

                <!-- <div class="btn" @click="state.seachMenu = state.seachMenu + 1">查询</div> -->
              </el-form-item>
              <el-form-item label="班次：" class="ban-col-gl">
                <el-radio-group v-model="state.classes" :text-color="'#AAE65A'" fill="#AAE65A" @change="state.seachMenu = state.seachMenu + 1">
                  <el-radio label="morning">08:00~20:00</el-radio>
                  <el-radio label="evening">20:00~08:00</el-radio>
                </el-radio-group>
                <div class="btn" @click="state.seachMenu = state.seachMenu + 1">查询</div>
              </el-form-item>
            </el-form>

            <div class="tip">
              <div style="display: flex">
                <div class="process"></div>
                <span>实施进度</span>
              </div>
              <div style="display: flex">
                <div class="noFinish"></div>
                <span>计划未完成</span>
              </div>
            </div>
          </div>
          <ganttasticGantt ref="ganttasticGanttRef" :key="state.seachMenu + (state.EXSoptions).toString()"
            :checkTime="state.checkTime" :menuList="state.EXSoptions" :checkMenu="state.checkMenuObj" :classes="state.classes"></ganttasticGantt>
          <!-- <ganttastic :key="state.seachMenu + (state.EXSoptions).toString()" :checkTime="state.checkTime" :menuList="state.EXSoptions" :checkMenu="state.checkMenuObj"></ganttastic> -->
          <!-- <div class="button-page">
            <el-pagination
              background
              layout="total, sizes, prev, pager, next, jumper"
              :total="400"
            />
          </div> -->
        </div>
      </el-scrollbar>
    </div>
  </div>
</template>
<script setup lang="ts">
import { useBaseDataStore } from '@/store';
import { computed, ref, onMounted, onBeforeUnmount } from 'vue';
import ganttasticGantt from '@/views/timing/ganttasticGantt.vue';
import { getExtendList, InDeviceSync } from "@/api/timing";
import moment from "moment";
/** @api */
const baseDataStore = useBaseDataStore();
/** @数据 */
const scaleX = computed(() => {
  return baseDataStore.getBaseData('scaleX') as number;
});
const clientHeight = computed(() => {
  return baseDataStore.getBaseData('clientHeight') as number;
});
/** 甘特图 */
const ganttasticGanttRef = ref<InstanceType<typeof ganttasticGantt> | null>(null);
interface State {
  /** 数据状态 */
  loading: boolean;
  maxTime: any;
  dateMin: any;
  /** 时间定时器 */
  timer: NodeJS.Timeout | undefined;
  getDataTimer?: any;
  /** 实时时间 */
  initTime: string;
  /** 时间范围 */
  timeArr: Array<string>;
  scrollTimer?: any;
  typeTel: string | undefined;
  options: InDeviceSync[];
  typeDetal: any;
  EXSoptions: InDeviceSync[];
  checkTime: any;
  /** 班次 */
  classes: "morning" | "evening";
  seachMenu: number;
  orderNo: string;
  typeTelObj: any;
  checkMenuObj: any;
}

let state = ref<State>({
  loading: false,
  timeArr: [],
  maxTime: '',
  dateMin: 0,
  initTime: '',
  scrollTimer: undefined,
  typeTel: '',
  options: [],
  typeDetal: '',
  EXSoptions: [],
  checkTime: moment().format("YYYY-MM-DD"),
  classes: "morning",
  seachMenu: 0,
  orderNo: '',
  typeTelObj: {},
  checkMenuObj: {},
  timer: undefined,
});
onMounted(() => {
  getExtendList(
    {
      "token": "@#$dsjfld1sa%d#$3%Ds0d9fB",
      "data": { "factory_id": "1" },
      "scenesNo": "Device_Type",
      "uploadId": "admin"
    }
  ).then(res => {
    if (res.data) {
      state.value.options = res.data;
      state.value.typeTel = state.value.options[0]?.id;
      state.value.typeTelObj = state.value.options[0];
      getExtendDetailsList(state.value.options[0]?.id)
    }
  });
  setTimer();
})
onBeforeUnmount(() => {
  clearTimeout(state.value.timer);
})
/** 定时器 */
function setTimer() {
  state.value.checkTime = moment().format("YYYY-MM-DD");
  const hour = moment().hour();
  if (hour >= 8 && hour <= 20) {
    state.value.classes = "morning";
  } else {
    state.value.classes = "evening";
  }
  setTimeout(() => {
    ganttasticGanttRef.value?.getDapingTableList();
  }, 1000);
  clearTimeout(state.value.timer);
  state.value.timer = setTimeout(() => {
    setTimer();
  }, 1000 * 60 * 5);
}
/** 切换设备分类 */
function selectChange(data: any) {
  // console.log(data)
  getExtendDetailsList(data)
}
// function handlerSelectExs(data: any){
//   //console.log(data,222222222222)
//   if(data){
//     state.value.EXSoptions.forEach((ele: any)=>{
//       if(ele.jitai_code == data){
//         state.value.checkMenuObj = ele;
//       }
//     })
//   }else{
//     state.value.checkMenuObj = {};
//   }
// }
function getExtendDetailsList(device_id?: string) {
  getExtendList({
    "token": "@#$dsjfld1sa%d#$3%Ds0d9fB",
    "data": {
      "device_id": device_id,
    },
    "scenesNo": "Device",
    "uploadId": "admin"
  }
  ).then(res => {
    //console.log(res)
    if (res.data) {
      state.value.EXSoptions = res.data;
      state.value.typeDetal = res.data[0]?.jitai_uid || undefined;
      state.value.checkMenuObj = res.data[0] || {};
    }
    state.value.seachMenu = state.value.seachMenu + 1
  })
}
/** @生命周期 */
/** @方法 */
/** @侦听器 */
/** @公共方法 */
</script>
<style lang="scss" scoped>
.cont {
  padding-top: 10px;
  padding-left: 10px;

  padding-bottom: 0;
  box-sizing: border-box;
  background: url(../../assets/imgs/timeBg.png) no-repeat;
  background-repeat: round;
  padding: 50px 30px 10px;
  margin: -40px 5px 0px;
  :deep(.el-scrollbar){
    height: calc(100% - 30px)!important;
  }
}

.bg {
  width: 1900px;
  height: 936px;
  //background: url(../../assets/imgs/timeBg.png) no-repeat;
  //padding: 37px 27px 17px 30px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  //justify-content: space-between;
  // background-repeat: round;
  // padding: 50px 30px 10px;
  // margin: -40px 5px 0px;
  .top {
    height: 48px;
    display: flex;
    justify-content: space-between;
  }

  .button-page {
    height: 83px;
    display: flex;
    justify-content: flex-end;
    position: flex;
  }
}

:deep(.el-pager li) {
  background: rgba(0, 89, 183, 0.502) !important;
  color: #ffffff;
}

:deep(.btn-next) {
  background: rgba(0, 89, 183, 0.502) !important;
  color: #ffffff;
}

:deep(.el-pagination.is-background .el-pager li.is-active) {
  background: #1875c0 !important;
}

:deep(.btn-prev) {
  background: rgba(0, 89, 183, 0.502) !important;
  color: #ffffff;
}

:deep(.el-pagination__total) {
  color: #ffffff !important;
}

:deep(.el-input__wrapper) {
  // background: rgba(0, 89, 183, 0.502) !important;
  // border: 1px solid #14618a !important;
  background: rgba(203, 203, 203, 0.25)!important;
  border: 1px solid #FFFFFF!important;
  box-shadow: none !important;
}

:deep(.el-select .el-input__inner) {
  color: #ffffff !important;
}
:deep(.el-input__inner){
  color: #FFFFFF!important;
}
:deep(.el-pagination .el-input__inner) {
  color: #ffffff !important;
}

:deep(.el-select .el-input) {
  height: 35px !important;
}

:deep(.el-pagination__jump) {
  color: #ffffff !important;
}

.tip {
  width: 342px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

:deep(.el-form-item--default .el-form-item__label) {
  color: #fff !important;
}

.btn {
  width: 60px;
  height: 32px;
  border-radius: 2px;
  opacity: 1;
  text-align: center;
  margin-left: 40px;
  background: #C98700;//rgba(31, 92, 198, 0.5);

  box-sizing: border-box;
  border: 1px solid;
  border-image: linear-gradient(270deg, #FFFFFF 0%, #FFFFFF 50%, #FFFFFF 97%) 1;
  //linear-gradient(270deg, #0dcbff 0%, #ffffff 50%, #09caff 97%) 1;
  cursor: pointer;
  box-shadow: inset 2px 2px 5px 0px rgba(94, 94, 94, 0.49);
}

.process {
  width: 44px;
  height: 21px;
  opacity: 1;
  margin-right: 12px;

  background: #AAE65A;//var(--el-color-success);
}

.noFinish {
  width: 44px;
  height: 21px;
  opacity: 1;
  margin-right: 12px;
  background: #E8D945;//var(--el-color-primary);
}
.ban-col-gl:deep(.el-radio__input.is-checked+.el-radio__label){
  color: #AAE65A;
}:deep(.el-radio__input.is-checked .el-radio__inner){
  border-color: #AAE65A;
  background: #AAE65A;
}
:deep(.el-radio__label){
  color: #FFFFFF;
}
</style>